﻿@model Mobile.Models.Queue

@{
    ViewBag.Title = "Playlist";
}

<div data-role="header" class="ui-header ui-bar-a" role="banner">
    <h1 class="ui-title" role="heading" aria-level="1" style="color: Red"><strong>NEXTRACK</strong></h1>
    <div data-role="navbar" class="ui-navbar ui-mini" role="navigation">
        <ul>
            <li>@Html.ActionLink("Playlist", "Playlist", "GuestUI")</li>
            <li>@Html.ActionLink("Add Tune", "AddSong", "GuestUI")</li>
            <li>@Html.ActionLink("Leave Party", "Index", "Home")</li>
        </ul>
    </div>
</div>

<p id="error" style="color:Maroon;background-color:#fbb;font-weight:bold;border-radius:5px;margin:8px;padding:8px;">
    Sorry! We are experiencing difficulties connecting to the Nextrack server. Please try again later.
</p>

<div style="margin:5px">
    <div id="np-ajax"> </div>

    <div id="qd-ajax"> </div>
</div>

<script type="text/javascript">
    function RefreshData() {
        $.ajax({
            url: '@Url.Action("GetNowPlaying")',
            datatype: 'html',
            success: function (data) {
                $('#np-ajax').empty().html(data).trigger('create');
                $('#error').hide();
            },
            error: function (f) {
                console.log(f);
                $('#np-ajax').empty();
                $('#error').fadeIn();
            }
        });

        $.ajax({
            url: '@Url.Action("GetQueue")',
            datatype: 'html',
            success: function (data) {
                $('#qd-ajax').empty().html(data).trigger('create');
                $('#error').hide();
            },
            error: function (f) {
                console.log(f);
                $('#qd-ajax').empty();
                $('#error').fadeIn();
            }
        });
    }

    function DoVote(songID, up) {
        var voteurl;

        if (up)
            voteurl = '@Url.Action("UpvoteButton")';
        else
            voteurl = '@Url.Action("DownvoteButton")';

        console.log(songID, up, voteurl);

        $.ajax({
            url: voteurl,
            data: { 'songID': songID },
            datatype: 'html',
            success: function (data) {
                console.log('Vote Success'); //, data);
                $('#qd-ajax').empty().html(data).trigger('create');
                $('#error').hide();
            },
            error: function (f) {
                console.log('Vote Failure', f);
                $('#error').fadeIn().text('Error Submitting your vote.');
            }
        });
    }

    function refreshLoop() {
        RefreshData();
        setTimeout(refreshLoop, 8000);
    };

    $('#error').hide();
    refreshLoop();
</script>